<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="canvas-list">
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
    </div>
    <div class="tools">
        <div class="pen active" id="pen">
            <img src="./img/pen (1).svg" alt="">
        </div>
        <div class="eraser disactive" id="eraser">
            <img src="./img/eraser (1).svg" alt="">
        </div>
        <div class="clear" id="clear">
            <img src="./img/brush.svg" alt="" title="清空画布">
        </div>
        <div class="save" id="save">
            <img src="./img/picture.svg" alt="" title="保存图片">
        </div>
    </div>
    <div class="tools-options">
        <ol class="line-color">
            <li id="color1" color="#000000" class="active"></li>
            <li id="color2" color="#093D64"></li>
            <li id="color3" color="#FB6602"></li>
            <li id="color4" color="#DC3972"></li>
            <li id="color5" color="#34ADAE"></li>
            <li id="color6" color="#FD8F52"></li>
            <li id="color7" color="#78932C"></li>
            <li id="color8" color="#555555"></li>
        </ol>
        <ol class="line-weight">
            <li weight="10"></li>
            <li weight="15" class="active"></li>
            <li weight="20"></li>
            <li weight="25"></li>
        </ol>
        <ol class="eraser-width">
            <li id="eraser16" eraser="16">
                <img src="./img/eraser16.ico" alt="">
            </li>
            <li id="eraser32" eraser="32" class="active">
                <img src="./img/eraser32.ico" alt="">
            </li>
            <li id="eraser48" eraser="48">
                <img src="./img/eraser48.ico" alt="">
            </li>
            <li id="eraser64" eraser="64">
                <img src="./img/eraser64.ico" alt="">
            </li>
        </ol>
        <ol class="background-color">

        </ol>
    </div>

</body>

<script src="./index.js"></script>

</html>